<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>翼蛙网络</title>
<meta name="description" content="">
<meta name="author" content="">

<!-- Favicons
    ================================================== -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">

<!-- Bootstrap -->
<link rel="stylesheet" type="text/css"  href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">

<!-- Slider
    ================================================== -->
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet" media="screen">

<!-- Stylesheet
    ================================================== -->
<link rel="stylesheet" type="text/css"  href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">
<link href='http://fonts.useso.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
<!--<script type="text/javascript" src="js/modernizr.custom.js"></script>-->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
    <!-- Navigation -->
    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">
                    <i class="fa fa-terminal"></i>  翼蛙网络
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">我们的服务</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#works">我们的作品</a>
                    </li>                    
                    <li>
                        <a class="page-scroll" href="#about">我们的理念</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#team">我们的团队</a>
                    </li>
                    <!--<li>-->
                        <!--<a class="page-scroll" href="#testimonials">我们的客户</a>-->
                    <!--</li>-->
                    <li>
                        <a class="page-scroll" href="#contact">联系我们</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

<!-- Header -->
    <header class="intro">
        <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <h1>我们是 <span class="brand-heading">翼蛙网络</span></h1>
                        <p class="intro-text">为企业提供全方位的技术服务</p>
                        <a href="#services" class="btn btn-circle page-scroll">
                            <i class="fa fa-angle-double-down animated"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
<!-- Services Section -->
<div id="services" class="text-center">
  <div class="container">
    <div class="section-title center">
      <h2>我们的 <strong>服务</strong></h2>
      <hr>
      </div>
    <div class="space"></div>
    <div class="row">
      <div class="col-md-4 col-sm-6 service"> <i class="fa fa-laptop"></i>
        <h4><strong>UE/UI</strong></h4>
        <p>用户体验设计,交互界面设计,我们提供专业整体设计</p>
      </div>
      <div class="col-md-4 col-sm-6 service"> <i class="fa fa-code"></i>
        <h4><strong>应用开发</strong></h4>
        <p>网站建设,微信公众号,手机APP,我们提供一站式解决方案</p>
      </div>
      <div class="col-md-4 col-sm-6 service"> <i class="fa fa-rocket"></i>
        <h4><strong>咨询服务</strong></h4>
        <p>营销咨询,产品咨询,技术咨询,我们提供互联网战略咨询</p>
      </div>
    </div>
  </div>
</div>
<!-- Portfolio Section -->
<div id="works">
  <div class="container"> <!-- Container -->
    <div class="section-title text-center center">
      <h2>我们的 <strong>作品</strong></h2>
      <hr>
      <div class="clearfix"></div>
      <p>作品包含了UE/UI设计,家政O2O类型微信公众号,电商类APP,智能控制类APP等</p>
    </div>
    <div class="categories">
      <ul class="cat">
        <li>
          <ol class="type">
            <li><a href="#" data-filter="*" class="active">所有</a></li>
            <li><a href="#" data-filter=".web">UI/UE</a></li>
            <li><a href="#" data-filter=".app">手机APP</a></li>
            <li><a href="#" data-filter=".wechat">微信公众号</a></li>
          </ol>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <div class="row">
      <div class="portfolio-items">
        <div class="col-sm-6 col-md-3 col-lg-3 web">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4>趣味社</h4>
                <small>UI/UE</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="http://o6v10x8cd.bkt.clouddn.com/design1.jpg" class="img-responsive" >  </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 col-lg-3 web">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4>无糖运动</h4>
                <small>UI/UE</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="http://o6v10x8cd.bkt.clouddn.com/design2.jpg" class="img-responsive" >  </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 col-lg-3 app">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4>方太</h4>
                <small>手机应用(pad版)</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="http://o6v10x8cd.bkt.clouddn.com/ft.png" class="img-responsive" >  </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-3 col-lg-3 web">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4>一个房产类APP</h4>
                <small>UI/UE</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="http://o6v10x8cd.bkt.clouddn.com/design3.jpg" class="img-responsive">  </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 col-lg-3 app">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4>悦管家</h4>
                <small>手机APP</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="http://o6v10x8cd.bkt.clouddn.com/yueguanjiaapp.jpg" class="img-responsive" >  </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 col-lg-3 wechat">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4>悦管家</h4>
                <small>微信公众号</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="http://o6v10x8cd.bkt.clouddn.com/ygj.png" class="img-responsive" >  </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 col-lg-3 web">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4>旅路</h4>
                <small>UI/UE</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="http://o6v10x8cd.bkt.clouddn.com/design4.jpg" class="img-responsive" >  </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3 col-lg-3 app">
          <div class="portfolio-item">
            <div class="hover-bg">
              <div class="hover-text">
                <h4>优品道商家</h4>
                <small>手机APP</small>
                <div class="clearfix"></div>
                <i class="fa fa-search"></i> </div>
              <img src="http://o6v10x8cd.bkt.clouddn.com/ypd1.png" class="img-responsive" >  </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
<!-- About Section -->
<div id="about">
  <div class="container">
    <div class="section-title text-center center">
      <h2>我们的 <strong>理念</strong></h2>
      <hr>
    </div>
    <div class="row">
      <div class="col-md-6"> <img src="http://o6v10x8cd.bkt.clouddn.com/about.png" class="img-responsive"> </div>
      <div class="col-md-6">
        <div class="about-text"> <i class="fa fa-users"></i>
          <div class="padding-left"><h4>技术</h4>
          <p>技术,创造财富和希望</p></div>
          <i class="fa fa-magic"></i>
          <div class="padding-left"><h4>创新</h4>
          <p>创新,诞生奇迹与梦想</p></div>
          <i class="fa fa-check-square-o"></i>
          <div class="padding-left"><h4>选择</h4>
          <p>生命,是上天赋予我们的财富.而选择什么样的生活,则完全取决于我们自己.是生活得丰富,充实而热烈还是生活得单调,平庸而贫乏? 我们认为: "既然活着,就要生活得有意义."</p></div>

        </div>
      </div>
    </div>
  </div>
</div>
	<div id="achivements" class="section dark-bg">
			<div class="container">	
				<div class="row">
					<div class="col-md-3 col-sm-3">
						<div class="achivement-box">
							<i class="fa fa-smile-o"></i>
							<span class="count">120</span>
							<h4>满意客户</h4>
						</div>
					</div> 
					<div class="col-md-3 col-sm-3">
						<div class="achivement-box">
							<i class="fa fa-code"></i>
							<span class="count">7,800</span>
							<h4>工作时长</h4>
						</div>
					</div> 
					<div class="col-md-3 col-sm-3">
						<div class="achivement-box">
							<i class="fa fa-check-square-o"></i>
							<span class="count">340</span>
                            <h4>完成作品</h4>
						</div>
					</div> 
					<div class="col-md-3 col-sm-3">
						<div class="achivement-box">
							<i class="fa fa-trophy"></i>
							<span class="count">25</span>
							<h4>获得荣誉</h4>
						</div>
					</div> 
				</div>
			</div>
		</div>
<!-- Team Section -->
<div id="team" class="text-center">
  <div class="container">
    <div class="section-title center">
      <h2>我们的 <strong>团队</strong></h2>
      <hr>
      <p>人生旅途中，总有人不断地走来，也有人不断地离开，每个人都有他的宿命。</p>
    </div>
    <div id="row">
      <div class="col-md-2 col-sm-6">
        <div class="thumbnail"> <img src="img/team/02.jpg" alt="..." class="img-circle team-img">
          <div class="caption">
            <h3>johnson</h3>
            <p>当你真心渴望一样东西的时候，整个宇宙都会联合起来帮你完成它。</p>
          </div>
        </div>
      </div>
      <div class="col-md-2 col-sm-6">
        <div class="thumbnail"> <img src="img/team/02.jpg" alt="..." class="img-circle team-img">
          <div class="caption">
            <h3>rankin</h3>
            <p>一个人最大的破产是绝望，最大的资产是希望。</p>
          </div>
        </div>
      </div>
      <div class="col-md-2 col-sm-6">
        <div class="thumbnail"> <img src="img/team/02.jpg" alt="..." class="img-circle team-img">
          <div class="caption">
            <h3>george</h3>
            <p>再长的路，一步步也能走完，再短的路，不迈开双脚也无法到达。</p>
          </div>
        </div>
      </div>
      <div class="col-md-2 col-sm-6">
        <div class="thumbnail"> <img src="img/team/02.jpg" alt="..." class="img-circle team-img">
          <div class="caption">
            <h3>albert</h3>
            <p>如果你能像看别人缺点一样，如此准确般的发现自己的缺点，那么你的生命将会不平凡。</p>
          </div>
        </div>
      </div>
      <div class="col-md-2 col-sm-6">
        <div class="thumbnail"> <img src="img/team/02.jpg" alt="..." class="img-circle team-img">
          <div class="caption">
            <h3>richard</h3>
            <p>活在昨天的人失去过去，活在明天的人失去未来，活在今天的人拥有过去和未来。</p>
          </div>
        </div>
      </div>
      <div class="col-md-2 col-sm-6">
        <div class="thumbnail"> <img src="img/team/03.jpg" alt="..." class="img-circle team-img">
          <div class="caption">
            <h3>vincy</h3>
            <p>人不怕走在黑暗里，就怕自己心中没有阳光。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--&lt;!&ndash; Testimonials Section &ndash;&gt;-->
<!--<div id="testimonials" class="text-center">-->
  <!--<div class="container">-->
    <!--<div class="section-title center">-->
      <!--<h2>What <strong>clients</strong> say</h2>-->
      <!--<hr>-->
    <!--</div>-->
    <!--<div class="row">-->
      <!--<div class="col-md-8 col-md-offset-2">-->
        <!--<div id="testimonial" class="owl-carousel owl-theme">-->
          <!--<div class="item">       -->
            <!--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam. Sed commodo nibh ante facilisis bibendum dolor feugiat at duis sed dapibus leo nec ornare diam.</p>-->
            <!--<p><strong>John DOE</strong>, CEO, Company.</p>-->
          <!--</div>-->
          <!--<div class="item">-->
            <!--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam. Sed commodo nibh ante facilisis bibendum dolor feugiat at duis sed dapibus leo nec ornare diam.</p>-->
            <!--<p><strong>Jenny DOE</strong>, CEO, Company.</p>-->
          <!--</div>-->
          <!--<div class="item">-->
            <!--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed dapibus leo nec ornare diam. Sed commodo nibh ante facilisis bibendum dolor feugiat at duis sed dapibus leo nec ornare diam.</p>-->
            <!--<p><strong>John DOEn</strong>, CEO, Company.</p>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
  <!--</div>-->
<!--</div>-->

<!-- Contact Section -->
<div id="contact" class="text-center">
  <div class="container">
    <div class="section-title center">
      <h2><strong>联系</strong> 我们</h2>
      <hr>
      <p>小小的天 有大大的梦想</p>
    </div>
    <div class="col-md-8 col-md-offset-2">
      <div class="col-md-4"> <i class="fa fa-map-marker fa-2x"></i>
        <p>上海市 闵行区 中春路3455弄<br>
          南郊别墅127号101</p>
      </div>
      <div class="col-md-4"> <i class="fa fa-envelope-o fa-2x"></i>
        <p>johnson@wingsfrog.com</p>
      </div>
      <div class="col-md-4"> <i class="fa fa-phone fa-2x"></i>
        <p> 021-52217765</p>
      </div>
      <hr>
      <div class="clearfix"></div>
    </div>
    <div class="col-md-8 col-md-offset-2">
      <hr>
      <h3>给我们捎个话</h3>
      <form name="sentMessage" id="contactForm" novalidate>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <input type="text" id="name" class="form-control" placeholder="您的姓名" required="required">
              <p class="help-block text-danger"></p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <input type="email" id="email" class="form-control" placeholder="您的邮件地址" required="required">
              <p class="help-block text-danger"></p>
            </div>
          </div>
        </div>
        <div class="form-group">
          <textarea name="message" id="message" class="form-control" rows="4" placeholder="请输入您要说的话" required></textarea>
          <p class="help-block text-danger"></p>
        </div>
        <div id="success"></div>
        <button type="submit" class="btn btn-default">发送</button>
      </form>
    </div>
  </div>
</div>
</div>
<nav id="footer">
  <div class="container">
    <div class="pull-left fnav">
      <p style="text-align: center">Copyright &copy; 2015 上海翼蛙网络科技有限公司 沪ICP备15024602号-1</p>
    </div>
    <div class="pull-right fnav">
      <!--<ul class="footer-social">-->
        <!--<li><a href="#"><i class="fa fa-facebook"></i></a></li>-->
        <!--<li><a href="#"><i class="fa fa-twitter"></i></a></li>-->
        <!--<li><a href="#"><i class="fa fa-dribbble"></i></a></li>-->
        <!--<li><a href="#"><i class="fa fa-linkedin"></i></a></li>-->
      <!--</ul>-->
    </div>
  </div>
</nav>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script type="text/javascript" src="js/bootstrap.js"></script> 
<script type="text/javascript" src="js/SmoothScroll.js"></script> 
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> 
<script type="text/javascript" src="js/jquery.isotope.js"></script> 
<script type="text/javascript" src="js/jquery.counterup.js"></script> 
<script type="text/javascript" src="js/waypoints.js"></script>
<script type="text/javascript" src="js/jqBootstrapValidation.js"></script> 
<script type="text/javascript" src="js/contact_me.js"></script>
<script src="js/owl.carousel.js"></script>

<!-- Javascripts
    ================================================== --> 
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>